<template>
 <div class="confirm" v-show="isShow">
     <div class="box">
         <p class="msg">{{msg}}</p>
         <div class="btns flex">
             <div class="btn" @click="$emit('sure')">确定</div>
             <div class="btn">取消</div>
         </div>
     </div>
 </div>
</template>
 
<script>
export default {
    props:['msg'],
 data () {
 return {
     isShow:false
 }
 },
 methods:{
     hide(){
         this.isShow=false
     },
     show(){
         this.isShow=true
     }
 }
}
</script>
 
<style lang = "less" scoped>
 .confirm{
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.5);
     text-align: center;
     .box{
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%,-50%);
         width: 300px;
         background-color: #fff;
         border-radius: 10px;
         padding: 10px;
         .msg{
             padding: 20px 0;
         }
         .btns{
             justify-content: space-around;
             .btn{
             width: 40%;
             height: 30px;
             text-align: center;
             background-color: #0a328e;
             color: #fff;
             line-height: 30px;
             cursor: pointer;
         }
         }
         
     }
 }
</style>